import React, {Component} from 'react';
import './css/App.css';
import './css/style.css';
import './css/bootstrap.css';
import LeftTop from './component/LeftTop';
import LeftBottom from './component/LeftBottom';
import ShowSingle from './component/ShowSingle';
import RightTop from './component/RightTop';
import RightCenter from './component/RightCenter';
import RightBottom from './component/RightBottom';

let datas = [
    {
        name: "武胜县",
        number: 11
    },
    {
        name: "邻水县",
        number: 22
    },
    {
        name: "前峰区",
        number: 33
    },
    {
        name: "华莹市",
        number: 44
    },
    {
        name: "岳池县",
        number: 52
    },
    {
        name: "广安区",
        number: 65
    },
];


class App extends Component {
    render() {
        return (
            <div className="wrapper">
                <div className="top"><span className="logo"/></div>
                <div className="layout">

                    <div className="layout_left">
                        <LeftTop/>


                        <LeftBottom/>

                    </div>
                    <div className="layout_cont">
                        <div className="layout_cont_top">

                            <div className="cont_top_h">
                                <div className="h_left">累计完成率</div>
                                <div className="h_cont">
                                    <span className="digital">3</span>
                                    <span className="digital">0</span>
                                    <span className="digital">0</span>
                                    <span className="digital">0</span>
                                    <span className="digital">0</span>
                                    <span className="digital">0</span>
                                    <span className="digital">0</span>
                                </div>
                                <div className="h_right">
                                    <span className="percentage_top">91</span>%
                                    <span className="percentage_bott">已完成</span>
                                </div>
                            </div>
                            <div className="cont_top_map">
                                {datas.map((item, index) => {
                                    let i = index + 1;
                                    let hnt = "hnt" + i;
                                    return <div className={hnt} key={i}>
                                        <span className="hnt_top">{item.number}</span>
                                        <span className="hnt_bom">{item.name}</span>
                                    </div>
                                })}
                            </div>

                        </div>


                        <div className="layout_cont_bottom">

                            <div className="layout_left_top">
                                <div className="nav"><span className="nav_left"/> <span
                                    className="nav_cont">派单维护展示</span> <span className="nav_right"/></div>
                                <ShowSingle/>
                            </div>


                        </div>


                    </div>

                    <div className="layout_right">
                        <div className="layout_right_top">
                            <div className="nav"><span className="nav_left"/> <span
                                className="nav_cont">监控点统计</span> <span className="nav_right"/></div>
                            <RightTop/>
                        </div>
                        <div className="layout_right_cont">
                            <div className="nav"><span className="nav_left"/> <span
                                className="nav_cont">设备离线时长</span> <span className="nav_right"/></div>
                            <RightCenter/>
                        </div>


                        <div className="layout_right_bottom">
                            <div className="nav"><span className="nav_left"/> <span
                                className="nav_cont">重点区域</span> <span className="nav_right"/></div>
                            <RightBottom/>
                        </div>


                    </div>

                </div>
            </div>
        );
    }
}

export default App;
